<template>
  <div class="app-container">
    <el-button type="primary" @click="handleAddHouse">添加房屋</el-button>
    <el-table v-loading="listLoading" :data="houseList" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="id" width="50">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="title">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column width="80px" align="center" label="面积">
        <template slot-scope="scope">
          <span>{{ scope.row.area }}</span>
        </template>
      </el-table-column>
      <el-table-column width="90px" align="center" label="每平方/元">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column width="40px" align="center" label="室">
        <template slot-scope="scope">
          <span>{{ scope.row.room }}</span>
        </template>
      </el-table-column>
      <el-table-column width="40px" align="center" label="厅">
        <template slot-scope="scope">
          <span>{{ scope.row.hall }}</span>
        </template>
      </el-table-column>
      <el-table-column width="40px" align="center" label="卫">
        <template slot-scope="scope">
          <span>{{ scope.row.bathroom }}</span>
        </template>
      </el-table-column>
      <el-table-column width="50px" align="center" label="卖家">
        <template slot-scope="scope">
          <span>{{ scope.row.salerId }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" label="所属地区">
        <template slot-scope="scope">
          <span>{{ zones[scope.row.zoneId-1].value }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" label="所属小区">
        <template slot-scope="scope">
          <span>{{ scope.row.village }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="发布时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房屋状态" width="80" align="center">
        <template slot-scope="{row}">
          {{ houseStatus[row.houseStatus].value }}
        </template>
      </el-table-column>
      <el-table-column label="房屋代理" width="80" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="small" icon="" @click="getHouseSale(row.id)" v-if="row.adminId === null">
            代理
          </el-button>
          <span v-else>已代理</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <router-link :to="'/house/edit/'+scope.row.id">
            <!-- <router-link :to="'/house/edit'"> -->
            <el-button type="primary" size="small" icon="el-icon-edit">
              编辑
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="dataTotal"
      v-show="dataTotal>0">
    </el-pagination>
  </div>
</template>

<script>
  import {
    getHouseByPage,
    getHouseSale
  } from '@/api/house'

  import {
    getData
  } from '@/api/data'
  import store from '@/store'

  export default {
    name: 'houseList',
    data() {
      return {
        houseList: [],
        listLoading: true,
        // 分页
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 15, 20, 100],
        dataTotal: 0,
        zones: [],
        houseStatus:[]
      }
    },
    created() {
      this.getHouseList()
      this.getZones()
      this.getHouseStatus()
    },
    methods: {
      getHouseStatus() {
        getData("house_status").then(res => {
          const {data} = res
          if(res.code ===1 ){
            for (var i = 0; i < data.length; i++) {
              let obj = {
                id:data[i].valueEn,
                value:data[i].value
              }
              this.houseStatus.push(obj)
            }
          }
        })
      },
      getZones() {
        getData("zone_id").then(res => {
          const {data} = res
          if(res.code ===1 ){
            for (var i = 0; i < data.length; i++) {
              let obj = {
                id:data[i].valueEn,
                value:data[i].value
              }
              this.zones.push(obj)
            }
          }
        })
      },
      // 获取数据
      getHouseList() {
        this.listLoading = true
        getHouseByPage(this.currentPage, this.pageSize).then(res => {
          const {
            data
          } = res
          this.dataTotal = data.total
          this.houseList = data.data
          this.listLoading = false
        })
      },
      // 分页功能
      handleSizeChange(val) {
        this.pageSize = val
        this.getHouseList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getHouseList()
      },
      //添加房屋
      handleAddHouse(){
        this.$router.push("/house/new")
      },
      // 获取房屋代理
      getHouseSale(id){
        const data = {
          token : store.getters.token,
          id : id
        }
        getHouseSale(data).then(res => {
          if(res.code ===1 ){
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getHouseList()
          }
        })
      }
    }
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
